<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :obj="companyInfo" :is-root="true" @add-dept="onAdd" />

        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <tree-tools
            slot-scope="{ data }"
            :obj="data"
            @add-dept="onAdd"
            @edit-dept="onEdit"
          />
        </el-tree>
      </el-card>

      <add-dept
        ref="dept"
        v-model="addDialogVisible"
        :node="treeNode"
        @addSuccess="load"
        @editSuccess="load"
      />
    </div>
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { getDepartment } from '@/api/department'
import { transListToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  components: { treeTools, AddDept },
  data() {
    return {
      treeData: [],
      // 默认传值得数据名称是什么
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      companyInfo: { name: '传智播客', manager: '负责人', id: '' },
      isRoot: false,
      addDialogVisible: false,
      treeNode: {}
    }
  },

  created() {
    this.load()
  },

  methods: {
    async  load() {
      const res = await getDepartment()
      this.treeData = transListToTree(res.depts, '')
    },

    // 显示点击的弹层并 传值给当前点击的弹层 添加子部门
    onAdd(data) {
      console.log(data)
      this.addDialogVisible = true

      // 用来添加时校验
      this.treeNode = data
    },
    onEdit(data) {
      this.addDialogVisible = true

      // 用来校验
      this.treeNode = data
      // 获取最新数据渲染到表单
      this.$refs.dept.getDeptInfo(data.id)
    }

  }
}
</script>

<style scoped lang="less"></style>
